<template>
  <div v-loading="interviewInfoLoading || loading">
    <ContentWrap>
      <el-descriptions
        :title="t('interviewScore.specialist.title')"
        :column="9"
        direction="vertical"
        label-width="100"
        border
      >
        <el-descriptions-item :label="t('interviewScore.specialist.interviewDate')"
          >{{ formatDate(interview.interviewDate, 'YYYY-MM-DD') }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.groupName')"
          >{{ interview.groupName }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.interviewTime')" span="7"
          >{{ interview.interviewTimes }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.interviewAmount')"
          >{{ interview.interviewAmount }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.unscoredAmount')"
          >{{ interview.unscoredAmount }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.scoredAmount')"
          >{{ interview.scoredAmount }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.confirmScoredAmount')"
          >{{ interview.confirmScoredAmount }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.meetingsNumber')"
          >{{ interview.meetingsNumber }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.qqGroupNumber')"
          >{{ interview.qqGroupNumber }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.specialistName1')"
          >{{ interview.specialistName1 }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.specialistName2')"
          >{{ interview.specialistName2 }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('interviewScore.specialist.specialistName3')"
          >{{ interview.specialistName3 }}
        </el-descriptions-item>
      </el-descriptions>
    </ContentWrap>

    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item :label="t('student.fields.studentName')" prop="studentName">
          <el-input
            v-model="queryParams.studentName"
            :placeholder="t('common.inputTextPlaceholder') + t('student.fields.studentName')"
            clearable
            @keyup.enter="handleQuery"
            class="!w-160px"
          />
        </el-form-item>
        <el-form-item :label="t('student.fields.phone')" prop="phone">
          <el-input
            v-model="queryParams.phone"
            :placeholder="t('common.inputTextPlaceholder') + t('student.fields.phone')"
            clearable
            @keyup.enter="handleQuery"
            class="!w-160px"
          />
        </el-form-item>
        <el-form-item :label="t('interviewScore.specialist.scoreStatus')" prop="scoreStatus">
          <el-select
            v-model="queryParams.scoreStatus"
            :placeholder="
              t('common.selectTextPlaceholder') + t('interviewScore.specialist.scoreStatus')
            "
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('interviewScore.specialist.scoreStatus1')" :value="true" />
            <el-option :label="t('interviewScore.specialist.scoreStatus2')" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('interviewScore.specialist.confirmStatus')" prop="confirmStatus">
          <el-select
            v-model="queryParams.confirmStatus"
            :placeholder="
              t('common.selectTextPlaceholder') + t('interviewScore.specialist.confirmStatus')
            "
            clearable
            class="!w-160px"
            @change="handleQuery"
          >
            <el-option :label="t('interviewScore.specialist.confirmStatus1')" :value="true" />
            <el-option :label="t('interviewScore.specialist.confirmStatus2')" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" />
            {{ t('common.search') }}
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" />
            {{ t('common.reset') }}
          </el-button>
          <el-button type="primary" @click="handleConfirmAll">
            <Icon icon="ep:checked" class="mr-5px" />
            {{ t('interviewScore.specialist.batchConfirm') }}
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <vxe-toolbar ref="toolbarRef" custom />
      <vxe-table
        id="iInterviewSpecialist-table"
        ref="tableRef"
        :data="list"
        stripe
        :custom-config="vxeTableConfig"
        :column-config="{ resizable: true }"
        :size="vxeTableSize"
      >
        <vxe-column :title="t('common.index')" type="seq" field="seq" width="60" align="center" />
        <vxe-column
          :title="t('student.fields.studentName')"
          field="studentName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.university')"
          field="university"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.studyMajor')"
          field="studyMajor"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.attachment')"
          field="attachment"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        >
          <template #default="scope">
            <FileObjectDownload :file-json="scope.row.attachment" />
          </template>
        </vxe-column>
        <vxe-column
          :title="t('interviewScore.specialist.score')"
          field="score"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.interviewScore')"
          field="interviewScore"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('student.fields.confirmJudges')"
          field="confirmJudges"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('interview.fields.interviewDate')"
          field="interviewDate"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
          :formatter="vxeDateFormatter2"
        />
        <vxe-column
          :title="t('interview.fields.interviewTimes')"
          field="interviewSlotTime"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('interview.fields.groups')"
          field="groupName"
          align="center"
          show-header-overflow
          show-overflow
          min-width="100"
        />
        <vxe-column
          :title="t('common.operate')"
          field="operator"
          align="center"
          fixed="right"
          width="150"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleScore(scope.row)"
              :disabled="!!scope.row.score"
            >
              {{ t('interviewScore.specialist.score') }}
            </el-button>
            <el-button
              link
              type="primary"
              @click="handleConfirm(scope.row)"
              :disabled="scope.row.confirm"
            >
              {{ t('interviewScore.specialist.confirm') }}
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </div>

  <Dialog :title="t('interviewScore.specialist.score')" v-model="scoreVisible" width="400">
    <template #default>
      <el-form :model="form" ref="formRef" label-width="100px" v-loading="scoreLoading">
        <el-form-item :label="t('student.fields.studentName')" prop="studentName">
          {{ studentName }}
        </el-form-item>
        <el-form-item :label="t('interviewScore.specialist.score')" prop="score">
          <el-input-number v-model="form.score" :min="0" :max="100" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="scoreVisible = false" :disabled="scoreLoading"
        >{{ t('common.cancel') }}
      </el-button>
      <el-button type="primary" @click="handleSubmit" :disabled="scoreLoading"
        >{{ t('common.ok') }}
      </el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { formatDate, vxeDateFormatter2 } from '@/utils/formatTime'
import type { VxeTableInstance, VxeTablePropTypes, VxeToolbarInstance } from 'vxe-table'
import { useAppStore } from '@/store/modules/app'
import { InterviewApi, InterviewSpecialistInfoRespVO } from '@/api/recruit/interview'
import {
  InterviewScoreApi,
  InterviewScoreSpecialistRespVO,
  InterviewScoreVO
} from '@/api/recruit/interviewscore'
import FileObjectDownload from '@/components/FileObjectDownload/index.vue'

/** 我的面试 列表 */
defineOptions({ name: 'InterviewScene' })

const route = useRoute()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const toolbarRef = ref<VxeToolbarInstance>()
const tableRef = ref<VxeTableInstance>()

const loading = ref(true) // 列表的加载中
const list = ref<InterviewScoreSpecialistRespVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  batchId: undefined,
  interviewId: undefined,
  groupId: undefined,
  userId: undefined,
  studentId: undefined,
  score: undefined,
  confirm: undefined,
  remark: undefined,
  createTime: [],
  studentName: undefined,
  phone: undefined,
  scoreStatus: undefined,
  confirmStatus: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const vxeTableConfig: VxeTablePropTypes.CustomConfig = {
  storage: true,
  mode: 'drawer',
  checkMethod({ column }) {
    return !['seq', 'operator'].includes(column.field)
  }
}

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

// 查询面试信息
const interviewInfoLoading = ref(false)
const interview = ref<InterviewSpecialistInfoRespVO>({} as InterviewSpecialistInfoRespVO)
const getInterviewInfo = async () => {
  interviewInfoLoading.value = true
  try {
    interview.value = await InterviewApi.interviewSpecialistDetail(groupId.value)
  } finally {
    interviewInfoLoading.value = false
  }
}

// 查询列表
const getList = async () => {
  queryParams.groupId = groupId.value as any
  loading.value = true
  try {
    const data = await InterviewScoreApi.getInterviewScoreSpecialistPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 评分逻辑
const scoreLoading = ref(false)
const studentName = ref('')
const form = ref<Partial<InterviewScoreVO>>({})
const scoreVisible = ref(false)

const handleScore = (row: InterviewScoreSpecialistRespVO) => {
  studentName.value = row.studentName
  form.value = {
    batchId: row.batchId,
    interviewId: row.interviewId,
    groupId: row.interviewGroupId,
    recruitStudentId: row.id,
    studentId: row.accountId,
    score: 0
  }
  scoreVisible.value = true
}

const handleSubmit = async () => {
  try {
    await message.confirm(t('interviewScore.specialist.confirmScore'))
  } catch {
    return
  }
  try {
    scoreLoading.value = true
    await InterviewScoreApi.giveInterviewSpecialistScore(form.value)
    message.success(t('interviewScore.specialist.scoreSuccess'))
    scoreVisible.value = false
    getList()
    getInterviewInfo()
  } catch (error) {
    message.error(error.message)
  } finally {
    scoreLoading.value = false
  }
}

// 确认评分逻辑
const handleConfirm = async (row: InterviewScoreSpecialistRespVO) => {
  if (!row.score) {
    message.error(t('interviewScore.specialist.afterScore'))
    return
  }
  if (row.scoreJudgesCount < 3) {
    message.error(t('interviewScore.specialist.waitingOthers'))
    return
  }
  try {
    await message.confirm(t('interviewScore.specialist.confirmConfirm'))
  } catch {
    return
  }

  try {
    loading.value = true
    await InterviewScoreApi.confirmInterviewSpecialistScore(row.scoreId)
    message.success(t('interviewScore.specialist.confirmSuccess'))
    getList()
  } finally {
    loading.value = false
  }
}

// 全部确认逻辑
const handleConfirmAll = async () => {
  try {
    await message.confirm(t('interviewScore.specialist.confirmConfirmAll'))
  } catch {
    return
  }

  try {
    loading.value = true
    await InterviewScoreApi.confirmInterviewSpecialistScoreAll(groupId.value)
    message.success(t('interviewScore.specialist.confirmSuccess'))
    getList()
  } finally {
    loading.value = false
  }
}

const groupId = ref('')
/** 初始化 **/
onMounted(() => {
  groupId.value = route.params.groupId as string

  getInterviewInfo()
  getList()

  const table = tableRef.value
  const toolbar = toolbarRef.value
  if (table && toolbar) {
    table.connect(toolbar)
  }
})
</script>

<style lang="scss" scoped>
:deep(.vxe-cell .el-button + .el-button) {
  margin-left: 0;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 15px !important;
}
</style>
